<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>iframe测试</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    iframe{
      border: 1px red solid;
      height: 600px;
      width: 1080px;
    }
  </style>
  <link href="./public/vue2.6.14/elementUI2.15.8/index.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="app">
  <div>
    <el-button @click="btnClick">切换</el-button> count:{{count}}
  </div>
  <iframe :src="src" frameborder="0"
    @load="iframeLoad"
  ></iframe>
</div>
<script src="./public/vue2.6.14/vue.min.js"></script><!--引入一个vue方便些-->
<script src="./public/vue2.6.14/elementUI2.15.8/index.js"></script>
<script>
  const vm = new Vue({
    el: '#app',
    data(){
      return {
        src: 'http://localhost:81/',
        count: 1
      }
    },
    methods:{
      btnClick(){
        switch (this.count){
          case 1:
            this.count = 2
            this.src = 'http://localhost:81/other/index.html'
            break;
          case 2:
            this.count = 3
            this.src = 'http://localhost:81/other/other.html'
            break;
          case 3:
            this.count = 4
            this.src = 'http://localhost:81/other/other.html#/dynamicTable'
            break;
          case 4:
            this.count = 5
            this.src = 'http://localhost:81/other/other.html#/selectObject'
            break;
          case 5:
            this.count = 1
            this.src = 'http://localhost:81/'
            break;
        }
      },
      iframeLoad(){
        console.log('加载完成',this.src)
      }
    }
  })
</script>
</body>
</html>
